<template>
    <div class="date-table-box">
        <el-button @click="changeTime">选择日期</el-button>
        <el-select v-model="date" placeholder="请选择">
            <el-option v-for="item in week1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-time-select v-model="startTime" :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '10:30'
        }" placeholder="选择时间">
        </el-time-select>
        <el-time-select v-model="endTime" :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '10:30'
        }" placeholder="选择时间">
        </el-time-select>
        <div class="table">
            <div class="t-left">
                <div class="l-icon">
                    <i class="el-icon-date"></i>
                </div>
                <div class="l-item" v-for="item in timeList" :key="item">{{ item }}</div>
            </div>
            <div class="t-right">
                <div class="r-top">
                    <div class="t-top-itme" v-for="item in weeks" :key="item.name">
                        <div>{{ item.name }}</div>
                        <div class="day">{{ item.day }}</div>
                    </div>
                </div>
                <div class="r-body">
                    <div class="r-row" v-for="(item, index) in tableData" :key="index">
                        <div class="r-col" v-for="(c, cIndex) in item" :key="cIndex">
                        </div>
                    </div>
                    <div class="card" :style="cardStyle">
                        <div class="name">风险管理规划方案共识会议</div>
                        <div class="tag">风险管理规划</div>
                        <div class="time">09:30 - 12:00</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            date: 0,
            timeList: [],
            squareList: [],
            tableData: [],
            startTime: '09:30',
            endTime: '10:30',
            cardConfig: {
                height: 'auto',
                top: 0,
                left: 0
            },
            week1: [
                {
                    label: '周日',
                    value: 0
                },
                {
                    label: '周一',
                    value: 1
                },
                {
                    label: '周二',
                    value: 2
                },
                {
                    label: '周三',
                    value: 3
                },
                {
                    label: '周四',
                    value: 4
                },
                {
                    label: '周五',
                    value: 5
                },
                {
                    label: '周六',
                    value: 6
                }
            ],
            weeks: [
                {
                    name: '周日',
                    day: 15
                },
                {
                    name: '周一',
                    day: 16
                },
                {
                    name: '周二',
                    day: 17
                },
                {
                    name: '周三',
                    day: 18
                },
                {
                    name: '周四',
                    day: 19
                },
                {
                    name: '周五',
                    day: 20
                },
                {
                    name: '周六',
                    day: 21
                }]
        }
    },
    created () {
        this.getHour()
        this.getTable()
    },
    computed: {
        cardStyle () {
            let { height, top, left } = this.cardConfig
            let style = {
                height,
                top,
                left
            }
            return style
        }
    },
    methods: {
        changeTime () {
            let startH = +this.startTime.split(':')[0]
            let startM = +this.startTime.split(':')[1]
            let endH = +this.endTime.split(':')[0]
            let endM = +this.endTime.split(':')[1]
            let startY = (startH + 1) * 60 + startM
            let endY = (endH + 1) * 60 + endM
            let H = endY - startY
            let X = this.date * 152
            this.cardConfig.height = H + 'px'
            this.cardConfig.top = startY + 'px'
            this.cardConfig.left = X + 'px'
        },
        getHour () {
            for (let i = 0; i < 25; i++) {
                let t = i.toString().padStart(2, '0')
                let str = `${t}:00`
                this.timeList.push(str)
            }
        },
        getTable () {
            this.tableData = []
            for (let i = 0; i < 25; i++) {
                let square = []
                for (let j = 0; j < 7; j++) {
                    let obj = {
                        value: j,
                        label: this.weeks[j].name
                    }
                    square.push(obj)
                }
                this.tableData.push(square)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.date-table-box {
    width: 100%;

    .table {
        width: 100%;
        display: flex;

        .t-left {
            width: 80px;
            text-align: center;
            border: 1px solid #F1F4F6;
            box-sizing: border-box;

            .l-icon {
                height: 60px;
                line-height: 60px;
                box-sizing: border-box;
                border-bottom: 1px solid #F1F4F6;
            }

            .l-item {
                height: 60px;
                line-height: 120px;
            }
        }

        .t-right {
            flex: 1;

            .r-top {
                width: 100%;
                display: flex;

                .t-top-itme {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 152px;
                    height: 60px;
                    padding-left: 12px;
                    box-sizing: border-box;
                    border: 1px solid #F1F4F6;
                    border-left: none;

                    .day {
                        font-weight: bold;
                    }
                }
            }

            .r-body {
                position: relative;

                .r-row {
                    width: 100%;
                    display: flex;

                    .r-col {
                        width: 152px;
                        height: 60px;
                        box-sizing: border-box;
                        border-right: 1px solid #F1F4F6;
                        border-bottom: 1px solid #F1F4F6;

                    }
                }

                .card {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    position: absolute;
                    top: 0;
                    width: 152px;
                    min-height: 60px;
                    overflow-y: auto;
                    padding: 8px;
                    background: rgba(230, 252, 247, 0.5);
                    border: 1px solid #14c4c4;
                    border-radius: 8px;

                    .tag {
                        margin: 8px 0;
                        width: auto;
                        padding: 2px 4px;
                        color: #fff;
                        background: #14C4C4;
                        border-radius: 4px;
                    }
                }
            }

        }
    }
}
</style>
